﻿<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="WPF101_Tutorial.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report" Height="445.511" Width="580">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="230" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
            <Canvas DockPanel.Dock="Left" Width="230" Height="100">
                <Image Style="{StaticResource backgroundImageStyle}" Width="560" Height="434.401" />
            </Canvas>
            <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
        </DockPanel>

        <Grid Margin="10" Grid.Column="1" Grid.Row="1">
            <Grid.Resources>
                <!-- Reason item template -->
                <DataTemplate x:Key="typeItemTemplate">
                    <Label Content="{Binding XPath=@ExpenseType}"/>
                </DataTemplate>
                <!-- Amount item template -->
                <DataTemplate x:Key="amountItemTemplate">
                    <Label Content="{Binding XPath=@ExpenseAmount}"/>
                </DataTemplate>
            </Grid.Resources>
            
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>

            <!-- Name -->
            <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
                <Label Style="{StaticResource labelStyle}">Name:</Label>
                <Label Content="{Binding XPath=@Name}" Style="{StaticResource labelStyle}"/>
            </StackPanel>

            <!-- Department -->
            <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
                <Label Style="{StaticResource labelStyle}">Department:</Label>
                <Label Content="{Binding XPath=@Department}" Style="{StaticResource labelStyle}"/>
            </StackPanel>

            <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="10" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" MinHeight="35.552" />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <!-- Expense type list -->
                <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
                    <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
                </Border>
                <ListBox Grid.Row="1" ItemsSource="{Binding XPath=Expense}" ItemTemplate="{StaticResource typeItemTemplate}" Margin="0,0,0,15.554" />

                <!-- Amount list -->
                <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
                    <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
                </Border>
                <ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" ItemTemplate="{StaticResource amountItemTemplate}" Margin="0,0,0,15.554" />

            </Grid>
        </Grid>
    </Grid>
</Page>